<script setup>
import { reactive } from 'vue';
	//表单数据
	const form = reactive({
		bookname:'',
		author:'',
		publisher:'',
		creator:'东华理工',
	})
	
	//新增图书，提交表单
	const onSubmit = async () => {
		console.log('当前表单数据为:',form)
		const res = await uni.request({
			method:'POST',
			url:'https://hmajax.itheima.net/api/books',
			data:form,
		})
		//添加成功提示
		uni.showToast({title:res.data.message})
		setTimeout(()=>{
			//返回上一页
			uni.navigateBack()
		},2000)
		
			
	}
</script>

<template>
	<view class="form column">
		<image class="form-cover" src="../../static/ic_public_cover.png"></image>
		<view class="form-item row">
			<text class="form-item-label">图书名称:</text>
			<input v-model="form.bookname" class="form-item-input" type="text" placeholder="请输入图书名称" />
		</view>
		<view class="form-item row">
			<text class="form-item-label">图书作者:</text>
			<input v-model="form.author" class="form-item-input" type="text" placeholder="请输入图书作者" />
		</view>
		<view class="form-item row">
			<text class="form-item-label">出版社:</text>
			<input v-model="form.publisher" class="form-item-input" type="text" placeholder="请输入图书出版社" />
		</view>
		<view class="form-item row">
			<text class="form-item-label">创建者：</text>
			<input v-model="form.creator" class="form-item-input" type="text" placeholder="请输入图书创建者" />
		</view>
		<button @click="onSubmit" type="primary">新增图书</button>
	</view>
</template>



<style lang="scss">
	.form{
		align-items: center;
		.form-cover {
			width: 200rpx;
			height: 200rpx;
			margin: 20rpx;
		}
		
		.form-item {
			margin-bottom: 20rpx;
		}
		.form-item-label {
			font-size: 30rpx;
			width: 200rpx;
			text-align: right;
		}
		.form-item-input {
			font-size: 30rpx;
			border-bottom: 1rpx solid #ddd;
		}
	}
</style>
